<template>
        <nav-header></nav-header>
    <div id="photo-page">

        <el-card style="max-width: 100%">
            <template #header>
                <div class="card-header">
                    <span>证件照变身</span>
                </div>
            </template>
            <div class="image-operator">
                <div class="image">
                    <img v-if="photoFileUrl != null" :src="photoFileUrl" alt="" srcset="">
                    <input v-else type="file" accept="image/*" @change="handleFileUpload">
                </div>
                <div class="operator">
                    <div class="demo-color-block">
                        <span class="demonstration">切换背景色</span>
                        <el-color-picker v-model="newBgc" />
                    </div>
                    <div class="photo-color" style="margin-top: 20px;">
                        快速选择颜色
                        <span @click="newBgc = '#ff0000'" :class="newBgc == '#ff0000' ? 'active' : ''"
                            style="background-color: red;"></span>
                        <span @click="newBgc = '#0000ff'" :class="newBgc == '#0000ff' ? 'active' : ''"
                            style="background-color: blue;"></span>
                    </div>
                    <div class="flex gap-2 mt-4" style="margin-top: 20px;margin-bottom: 20px;">
                        照片大小
                        <div class="photo-size">
                            宽(px) <el-input v-model="photoWidthSize" style="width: 35%" type="number" />
                            高(px)<el-input v-model="photoHeightSize" style="width: 35%" type="number" />
                        </div>
                    </div>
                    <!-- 结果展示 -->
                    <el-watermark content="zseed">
                        <img style="width: 50%;height:50%;" v-if="handledFileUrl != null" :src="handledFileUrl" alt=""
                            srcset="">
                        <el-table v-else v-loading="generateLoading" style="width: 100%" />
                    </el-watermark>


                    <div class="download-photo">
                        <el-button type="primary" size="large" @click="generate">生成</el-button>
                        <el-button type="warning" size="large" @click="download">下载</el-button>

                    </div>
                </div>

            </div>
        </el-card>

    </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { changeBgcApi } from "../../network/photo"
import { isLoginApi } from "../../network/login"
import { ElMessage } from "element-plus"
import { hexColor2Rgb, saveLocalData } from "../../utils/utils"
import { useRouter } from "vue-router"
import  NavHeader  from "../itemcomp/NavHeader.vue"

const router = useRouter()
var newBgc = ref("#409EFF")
var photoFile = ref(null)
var photoFileUrl = ref(null)
var handledFileUrl = ref(null)
var generateLoading = ref(false)

var photoWidthSize = ref(0)
var photoHeightSize = ref(0)


const generate = () => {
    if (photoFile.value == null) {
        ElMessage({
            message: "请上传图片",
            type: "warning"
        })
        return
    }
    if(photoHeightSize.value==0||photoWidthSize.value==0){
        ElMessage({
            message: "图片尺寸不能为零",
            type: "warning"
        })
        return
    }
    generateLoading.value = true
    handledFileUrl.value = null
    var bgc = hexColor2Rgb(newBgc.value)
    changeBgcApi(photoFile.value, bgc,photoWidthSize.value,photoHeightSize.value).then(res => {
        generateLoading.value = false
        var url = URL.createObjectURL(res)
        handledFileUrl.value = url
    })
}


const download = () => {
    if (handledFileUrl.value != null) {
        let a = document.createElement("a")
        a.href = handledFileUrl.value
        a.download = "zseed.png"
        a.click()
    } else {
        ElMessage({
            message: "无图片信息，请重新生成",
            type: "warning"
        })
    }
}

const handleFileUpload = (event) => {

    const file = event.target.files[0]
    if (file && file.size > 5 * 1024 * 1024) {
        ElMessage({
            message: "文件大小不能超过5M",
            type: "warning"
        })
        return
    }

    const isJPGPNG = file.type === "image/jpeg" || file.type === "image/png"

    if (!isJPGPNG) {
        ElMessage({
            message: "只支持PNG和JPG",
            type: "warning"
        })
        return
    }

    var _URL = window.URL || window.webkitURL

    photoFileUrl.value = _URL.createObjectURL(file)

    photoFile.value = file

    // 获取图片长宽
    const reader = new FileReader();
    reader.onload = (e) => {
        const img = new Image();
        img.onload = () => {
            photoWidthSize.value = img.width
            photoHeightSize.value = img.height
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);



}

const isLogin = () => {
    isLoginApi().then(res => {
        if (res.code == 4000) {
            router.push("/login")
        } else if (res.code == 0) {
            saveLocalData("publicKey", res.data.public_key)
        } else {
            ElMessage({
                message: res.errmsg,
                type: "warning"
            })
        }
    })
}

onMounted(() => {
    isLogin()

})
</script>

<style  scoped>
#photo-page {
    width: 80%;
    margin: 50px auto;
}

#photo-page .image-operator {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}

#photo-page .image-operator .image {
    width: 48%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

#photo-page .image-operator .operator {
    width: 48%;
}

#photo-page .image-operator .image img {
    width: 100%;
}

#photo-page .image-operator .operator .photo-color {
    display: flex;
    display: -webkit-flex;
    justify-content: start;
    align-items: center;
}

#photo-page .image-operator .operator .photo-color span {
    width: 30px;
    height: 30px;
    margin: 10px;
    cursor: pointer;
}




#photo-page .image-operator .operator .photo-size {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px 0;
}

#photo-page .image-operator img {
    width: 100%;
}

#photo-page .image-operator .download-photo {
    display: flex;
    display: -webkit-flex;
    justify-content: end;
}
</style>